<template>
  <div id="mustBuyGoods" v-if="mustBuyGoods">
    <div class="title" >
      <p>{{ mustBuyGoods.name }}</p>
      <p>
        <a href="javascript:void(0)"  v-for="(item) in mustBuyGoods.palteTabList" :key="item.id"><span>{{item.name}}</span></a>
      </p>
    </div>
    <div id="mustBuyContent"  >
      <dl class="content1">
        <dt>
          <img :src="mustBuyGoods.platePicList[0].imgUrl">
          <img :src="mustBuyGoods.platePicList[1].imgUrl">
        </dt>
        <dd>
          <img :src="mustBuyGoods.platePicList[2].imgUrl">
          <img :src="mustBuyGoods.platePicList[3].imgUrl">
        </dd>
      </dl>
      <div class="content2">
          <img :src="mustBuyGoods.platePicList[4].imgUrl">
          <img :src="mustBuyGoods.platePicList[5].imgUrl">
          <img :src="mustBuyGoods.platePicList[6].imgUrl">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:"mustBuyGoods",
  props: ["mustBuyGoods"]
}
</script>

<style scoped>
  dl,dt,dd {
  margin: 0;
  padding: 0;
  }
    #mustBuyGoods {
      width: 1200px;
      margin: 0 auto;
    }
    #mustBuyGoods > .title {
      height: 40px;
      display: flex;
      justify-content: space-between;
      margin: 40px 0 20px;
    }
    #mustBuyGoods > .title > p {
      margin: 0;
      color: #333;
      font-size: 26px;
      line-height: 40px;
    }
    #mustBuyGoods > .title > p span {
      color: #333;
      font-size: 16px;
    }
    #mustBuyGoods > .title > p span:hover {
      color: #0099a8;
    }
    #mustBuyGoods > .title > p span::after {
      content: " / ";
    }
    #mustBuyGoods > .title a:last-of-type > span::after {
      content: "";
    }
    #mustBuyContent > .content1 {
      width: 1200px;
      display: flex;
    }
    #mustBuyContent > .content1 > dt {
      display: flex;
    }
    #mustBuyContent > .content1 > dt > img {
      height: 461px;
      width: 393px;
      margin-right: 9px;
    }
    #mustBuyContent > .content1 > dd > img {
      height: 225px;
      width: 393px;
      margin-bottom: 7px;
    }
    #mustBuyContent > .content2 {
      display: flex;
      height: 180px;
      justify-content: space-between;
      margin-top: 3px;
    }
    #mustBuyContent > .content2 > img {
      height: 170px;
      width: 393px;
    }
</style>